<template>
	<view>
		
		<view class="page" >
		
		    <view :style="{height:statustop+'px'}"></view>
			
			<view class="jiaonang">
				<text @tap="gohome" class="icon-fanhui iconfont"></text>
				<view class="headmenu">
				    登录
				</view>
			</view>
		
		
		
		    <view class="headbox">
		
		        <view class="headbox_1">您好,</view>
		        <view class="headbox_2">欢迎登录</view>
		
		    </view>
		
		
		    <view class="loginbox">
		        <view style="height: 80rpx;"></view>
		
		        <view class="loginbox_1">
		
		            <view class="loginbox_1_t" >请输入手机号</view> 
		
		            <view class="loginbox_2_t">
		                <input type="number"  @input="getmobile" placeholder="请输入电话号码" maxlength="11" />
		            </view> 
		
		        </view>
		        
		
		        <view class="loginbox_1">
		
		            <view class="loginbox_1_t">请输入验证码</view> 
		
		            <view class="loginbox_2_b">
		                <input type="number" @input="getcode" placeholder="请输入验证码" maxlength="6" />
		
		                <view class="yzm" @tap="getsms" >{{yzmcode}}</view>
		            </view> 
		
		
		        </view>
		
		        <view class="loginbtn" @tap="submits" >立即提交 </view>
		
		
		    </view>
		
		
		    <view class="goreg" @tap="goregin" >
		        没有账户 <text>立即注册</text>
		    </view>
			
			<button class="goregs" v-if="tt==1"  open-type="getUserInfo" @tap="getUserProfiles">抖音一键登录</button>

			
	
		
		</view>
		
		

	</view>
</template>

<script>
		import {curl} from 'common/api.js';
	export default {
		data() {
			return {
				statustop:0,
				statuheight:32,
				yzmcode:'获取验证码',
				mobile:'',
				code:'',
				openid:'',
				tt:0
			}
		},
		

		  
		  
		onLoad() {
			
			// 抖音或者小程序
			//#ifdef MP-TOUTIAO || MP-WEIXIN
				let res = uni.getMenuButtonBoundingClientRect();
				console.log('手机状态栏高度',res)
				var infos = uni.getSystemInfoSync();
				var jiaolang=res.top;
				this.statustop=res.top;
				this.statuheight=res.height;
			//#endif
			
			//#ifdef MP-TOUTIAO 
			this.tt=1;
			// #endif
		},
		
		onShow() {
			
			var that=this;
			var that=this;
			// #ifdef MP-WEIXIN
			uni.login({
			  provider: 'weixin',
			   success:res=>{
			    console.log();  
				curl('user/getopenid', {'wxcode':res.code}).then((res) => {
					if (res.code==1) {
						that.openid=res.data
					}	
				});
			    }
			  });
				
			// #endif
			
			
			//#ifdef MP-TOUTIAO 
				uni.login({
					provider: '',
					success: function(loginRes) {
						console.log('--------')	
						console.log(loginRes)		
						
						curl('ttink/getopenid', {'code':loginRes.code,'anonymousCode':loginRes.anonymousCode}).then((res) => {
							if (res.code==1) {
								that.openid=res.data.data.openid	
							}	
						});
						
						
					},
					fail(res) {
						console.log(res)		
					}
				})
			// #endif
		},
		
		methods: {
	
			getUserProfiles() {
				var that=this;
					
				uni.getUserProfile({
					success(e) {
						console.log(e);
						
						var openid=that.openid;
						var nickname=e.userInfo.nickName;
						var avatarUrl=e.userInfo.avatarUrl;
						
						console.log(nickname,avatarUrl);
						
						curl('user/registerb', {'avatarUrl':avatarUrl,'nickname':nickname,'openid':openid}).then((res) => {
							
							uni.showToast({
								title:res.msg,
								icon:'none'
							})
							
							uni.setStorageSync('tokne',res.data.userinfo.token)
							uni.setStorageSync('userinfo',res.data.userinfo)
							
							uni.switchTab({
								url:"/pages/index/index"
							})
							
								
						});
						
					}
				})
			
			
			
			},
			gohome(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			submits(){
				
				var that=this;
				var mobile=this.mobile;
				var code=this.code;
				var openid=this.openid;
				
				
					// #ifdef MP-WEIXIN
				curl('user/mobilelogin', {'mobile':mobile,'captcha':code,'openid':openid}).then((res) => {
					
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					
					uni.setStorageSync('tokne',res.data.userinfo.token)
					uni.setStorageSync('userinfo',res.data.userinfo)
					
					uni.switchTab({
						url:"/pages/index/index"
					})
					
						
				});
				
				// #endif
				
				//#ifdef MP-TOUTIAO 
				curl('user/ttmobilelogin', {'mobile':mobile,'captcha':code,'openid':openid}).then((res) => {
					
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
					
					uni.setStorageSync('tokne',res.data.userinfo.token)
					uni.setStorageSync('userinfo',res.data.userinfo)
					
					uni.switchTab({
						url:"/pages/index/index"
					})
					
						
				});
				
				// #endif
			},
			
			getsms(ret){
				var that=this;
				
				var mobile=this.mobile;
				var yzmcode=this.yzmcode;
				if (yzmcode!='获取验证码') {
					return false;
				}	
				
				curl('Sms/send', {'mobile':mobile,'event':'mobilelogin'}).then((res) => {
				uni.showToast({
					title:res.msg,
					icon:'none'
				})
					if (res.code==1) {
					var s=60;
					var intx=setInterval(function(){
						
						s--;
						
						if (s<1) {
							that.yzmcode='获取验证码';
							clearInterval(intx);
						}else{
							
							that.yzmcode=s +'s后获取';
						}	
						
						
					},1000)
						
					}	
				});
				
				
			},
			goregin(){
				uni.navigateTo({
					url:"/pages/login/register"
				})
			},
			getmobile(res){
				console.log('电话',res);
				this.mobile=res.detail.value;
				
			},
			getcode(res){
				console.log('yzm',res);
				this.code=res.detail.value;
			}
		}
	}
</script>

<style>
.page {
    width: 100%;
    min-height: 100vh;
    background-size: 100% 100%;
	background-image: url('https://bantonggou.vipwjf.com/loginbg.png');
}
.jiaonang{
	width: 100%;
	height: 64rpx;
	display: flex;align-items: center;
}
.jiaonang>text{
	font-size: 30rpx;margin-left: 25rpx;
	font-weight: bold;color: #ffffff;
}
.headmenu {
    width: 640rpx;
    height: 64rpx;
    text-align: center;
    line-height: 64rpx;
    color: #ffffff;
    font-weight: bold;
}

.headbox{

    width: 640rpx;height: 200rpx;margin: auto;

}
.headbox_1{
    width: 397rpx;
    height: 104rpx;
    font-size: 60rpx;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 96rpx;
    text-shadow: 2rpx 6rpx 13rpx rgba(10,39,40,0.44);
}
.headbox_2{
    width: 397rpx;
    height: 44rpx;
    font-size: 36rpx;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 46rpx;
    text-shadow: 2rpx 6rpx 13rpx rgba(10,39,40,0.44);
}


.loginbox {
    width: 690rpx;
    height: 701rpx;margin: auto;
    background: #FFFFFF;
    border-radius: 30rpx;
}

.loginbox_1{
    width: 620rpx;height: 180rpx;margin: auto;
}

.loginbox_1_t{
    width: 620rpx;
    height: 40rpx;
    font-size: 34rpx;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #2C2C2C;
}

.loginbox_2_t{
    width: 620rpx;
    height: 60rpx;margin-top: 50rpx;
    border-bottom: 1px solid #ececec;
}


.loginbox_2_t>input{
    height: 60rpx;
    line-height: 50rpx;
    font-size: 32rpx;
}

.loginbox_2_b{

    width: 620rpx;
    height: 60rpx;margin-top: 50rpx;
    display: flex;align-items: center;
    border-bottom: 1px solid #ececec;
}

.loginbox_2_b>input{
    width: 420rpx;height: 60rpx;
    line-height: 50rpx;
    font-size: 32rpx;
}

.yzm{
    width: 180rpx;
    color: #646464;font-size: 26rpx;
    text-align: right;
}

.loginbtn {
    width: 588rpx;
    height: 100rpx;
    background: linear-gradient(-90deg, #45CBD3, #6DDDE1);
    border-radius: 20rpx;
}

.goreg{
    width: 100%;height: 100rpx;
    text-align: center;line-height: 180rpx;
    font-size:28rpx;
}

.goreg>text{
    font-size:28rpx;
}

.loginbtn{
    width: 588rpx;
    height: 100rpx;margin: auto;margin-top: 60rpx;
    background: linear-gradient(-90deg, #45CBD3, #6DDDE1);
    border-radius: 20rpx;
    text-align: center;line-height: 100rpx;
    color: #ffffff;font-size: 36rpx;font-weight: bold;
}


.goregs{
	 width: 588rpx;margin: auto;margin-top: 40rpx;
	 height: 40rpx;line-height: 40rpx;
	 background: none;
}
.goregs::after{
	border: none;
}
</style>
